<template>
	<header>
		<div class="header">
			<div class="search-input">
				<div class="input-box">
					<span class="icon"></span>
					<input
						class="input"
						type="text"
						v-model="inputText"
						placeholder="请输入关键字"
					/>
					<button class="seek" @click="goSearch">搜索</button>
				</div>
			</div>
			<div class="search-tabs">
				<span class="tabs-item" @click="cutRankIndex(-1)">
					<span class="text" :class="{ active: rankIndex === -1 }">综合</span>
					<span class="num"></span>
				</span>
				<span
					class="tabs-item"
					v-for="(item, index) in navList"
					:key="item.id"
					@click="cutRankIndex(index)"
				>
					<span class="text" :class="{ active: rankIndex === index }">{{
						item.name
					}}</span>
					<span class="num">{{ item.num }}</span>
				</span>
			</div>
			<hr class="hr" />
			<div class="navList">
				<div class="btn-vuo">
					<div class="btn-row">
						<button
							v-for="item in synthesisDecsList"
							:key="item.id"
							class="btn-item"
							:class="{ active: descIndex === item.id }"
							:id="item.id"
							@click="cutDesc(item.id, $event)"
						>
							{{ item.title }}
						</button>
					</div>
					<div class="right-row">
						<button class="btn-right" @click="isShowRank">
							更多筛选<span></span>
						</button>
					</div>
				</div>
				<div class="btn-vup" v-show="!isShow">
					<button
						class="btn-item"
						v-for="(durationList, index) in durationDescList"
						:key="durationList.id"
						:class="{ active: durationIndex === index }"
						@click="cutDuration(index)"
					>
						{{ durationList.title }}
					</button>
				</div>
				<div class="btn-vui" v-show="!isShow">
					<button
						class="btn-item"
						v-for="(zone, index) in zoneList"
						:key="zone.id"
						:class="{ active: zoneIndex === index }"
						@click="cutZone(index)"
					>
						{{ zone.title }}
					</button>
				</div>
			</div>

			<div class="video">
				<template v-if="rankIndex === -1">
					<CardCommon
						v-for="videoItem in videoList"
						:key="videoItem.uid"
						:videoItem="videoItem"
					/>
				</template>

				<template v-else>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
					<div class="video-item">
						<img src="./images/video.jpg" alt="#" class="video-img" />
						<h5 class="video-text">
							[全NC1080+/OP/ED/bd]
							<em class="keyword">sss</em>
							.
							<em class="keyword"> 古立特</em>
							.
							<em class="keyword">sss</em>
							/
							<em class="keyword">.电光机王/全季合集</em>
						</h5>
						<p class="video-card">
							<a href="#">
								<span class="svg"></span>
								<span class="nickname">AOMXARUIZY</span>
								<span class="time">.2018-12-16</span>
							</a>
						</p>
					</div>
				</template>
			</div>
		</div>
		<Pagination
			:currentPage="currentPage"
			:pageSize="pageSize"
			:total="total"
			@goPage="goPage"
		/>
	</header>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue";
import CardCommon from "@/components/cardCommon/index.vue";
import axios from "axios";
// import myAxios from "@/utils/myAxios";
export default {
	name: "SearchPage",
	components: {
		// SearchNav,
		Pagination,
		CardCommon,
		// ContentList,
		// ContentListOne,
	},
	data() {
		return {
			currentPage: 1,
			total: 0,
			pageSize: 20,
			rankIndex: -1,
			isShow: false,
			navList: [
				{
					name: "视频",
					num: 99,
				},
				{
					name: "番剧",
					num: 0,
				},
				{
					name: "影视",
					num: 0,
				},
				{
					name: "直播",
					num: 3,
				},
				{
					name: "专栏",
					num: 99,
				},
				{
					name: "话题",
					num: 0,
				},
				{
					name: "用户",
					num: 33,
				},
			],
			// 全部排序列表
			synthesisDecsList: [],
			// 切换排序列表标识
			descIndex: 1,
			durationIndex: 0,
			// 时间排序列表
			durationDescList: [],
			// 全部分区列表
			zoneList: [],
			zoneIndex: 0,
			videoList: [],
			inputText: "人",
		};
	},
	mounted() {
		this.getAddPor();
		// 获取全部排序列表
		this.getSynthesisDecsList();
		// 获取时间排序列表
		this.getDurationDescList();
		// 获取全部分区列表
		this.getZoneList();
		this.getVideoList();
		this.getAddPor();
	},
	methods: {
		goPage(currentPage) {
			console.log(currentPage);
			this.currentPage = currentPage;
		},
		cutRankIndex(index) {
			this.rankIndex = index;
		},
		isShowRank() {
			this.isShow = !this.isShow;
		},
		// 获取全部排序列表
		async getSynthesisDecsList() {
			const data = await axios({
				url: "http://localhost:3000/synthesisDecs",
				method: "GET",
			});
			this.synthesisDecsList = data.data;
		},
		// 获取时间排序列表
		async getDurationDescList() {
			const data = await axios({
				url: "http://localhost:3000/durationDesc",
				method: "GET",
			});
			// console.log("data", data);
			this.durationDescList = data.data;
		},
		// 获取全部分区列表
		async getZoneList() {
			const data = await axios({
				url: "http://localhost:3000/zone",
				method: "GET",
			});
			// console.log(data);
			this.zoneList = data.data;
		},
		async getVideoList() {
			const data = await axios({
				url: "http://localhost:3000/video",
				method: "GET",
			});
			// console.log(data);
			this.videoList = data.data.splice(0, this.pageSize);
		},
		// 切换全部排序
		cutDesc(id, event) {
			this.getAddPor();
			// const oid = +event.target.id;
			console.log(+event.target.id);
			let arr = [];
			if (+event.target.id === 2) {
				arr.push(
					this.videoList.sort((prev, now) => {
						return now.vLike - prev.vLike;
					})
				);
			}
			this.videoList = arr[0];
			console.log(arr);
			this.descIndex = id;
		},
		// 切换时间排序
		cutDuration(index) {
			this.durationIndex = index;
			// console.log(this.descIndex);
		},
		// 切换全部分区排序
		cutZone(index) {
			this.zoneIndex = index;
		},
		// 获取关键字搜索
		async getAddPor() {
			const data = await axios({
				url: "/api/searchObj",
				params: {
					searchValue: this.inputText,
				},
				method: "GET",
			});
			// console.log("data", data.data.data);
			// this.videoList = data.data.data;
			this.videoList = data.data.data.slice(0, this.pageSize);
			// console.log(data.data.data.length);
			this.total = data.data.data.length;
		},
		goSearch() {
			this.getAddPor();
		},
	},
};
</script>

<style lang="less" scoped>
.header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.search-input {
		margin-top: 25px;
		display: flex;
		justify-content: center;
		.input-box {
			display: flex;
			width: 628px;
			height: 36px;
			padding: 5px;
			border-radius: 5px;
			background-color: #f6f7f8;
			.icon {
				margin: 0 10px 0 15px;
				width: 20px;
				height: 36px;
				border: 1px solid red;
				box-sizing: border-box;
			}
			.input {
				width: 468px;
				height: 100%;
				font-size: 16px;
				margin-right: 15px;
			}
			.seek {
				width: 98px;
				padding: 0 20px;
				border: 1px solid;
				border-radius: 8px;
				cursor: pointer;
				font-size: 16px;
				color: #fff;
				background-color: #00aeec;
			}
		}
	}
	.hr {
		margin-top: 3px;
		border: none;
		border-top: 1px solid #f1f2f3;
	}
	// .active {
	//
	// }
	.search-tabs {
		height: 40px;
		margin-top: 25px;
		display: flex;
		padding: 0 64px;
		// border-bottom: 1px solid #000;
		// line-height: 40px;
		.tabs-item {
			display: flex;
			padding: 10px 20px;
			color: #61666d;
			&:first-child {
				padding-left: 0;
			}

			.text {
				font-size: 16px;
				cursor: pointer;
				&.active {
					color: #00aeec;
					border-bottom: 2px solid #00aeec;
				}
				&:hover {
					color: #00aeec;
				}
			}
			.num {
				font-size: 12px;
				line-height: 20px;
				border-radius: 8px;
				background-color: #f1f2f3;
			}
		}
	}
}
// 排序列表区
.header .navList {
	display: flex;
	flex-flow: column;
	padding: 0 64px;
	margin-top: 25px;
}
.header .navList .btn-vuo {
	display: flex;
	justify-content: space-between;
}
.header .navList .btn-vui {
	display: flex;
	flex-wrap: wrap;
}
.header .navList .btn-vup {
	display: flex;
}
.header .navList .btn-vuo .btn-row {
	display: flex;
}
.header .navList .btn-vuo .btn-row .btn-item,
.header .navList .btn-vui .btn-item,
.header .navList .btn-vup .btn-item {
	font-size: 14px;
	line-height: 32px;
	margin-right: 10px;
	padding: 0 15px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	background-color: #fff;
	&.active {
		background-color: #a1d8ed;
		color: #00aeec;
	}
	&:hover {
		color: #00aeec;
	}
}
.header .navList .btn-vui .btn-item,
.header .navList .btn-vup .btn-item {
	margin-top: 10px;
}

.header .navList .btn-vuo .right-row .btn-right {
	/* position: relative; */
	font-size: 14px;
	color: #18191c;
	padding: 0 10px;
	line-height: 32px;
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid rgb(115, 114, 114);
}
.header .navList .btn-vuo .right-row .btn-right span {
	display: inline-block;
	margin: 3px 0 0 2px;
	width: 13px;
	height: 13px;
	line-height: 34px;
	background-color: #000;
}
.video {
	display: flex;
	// justify-content: space-between;
	flex-wrap: wrap;
	padding: 30px 64px 0;
	.video-item {
		width: 255px;
		padding: 0 8px;
		margin-bottom: 40px;
		.video-img {
			display: block;
			width: 255px;
			height: 146.6px;
			border-radius: 8px;
		}
		.video-text {
			font-size: 15px;
			font-weight: 600;
			padding-right: 16px;
			margin-top: 8px;
		}
		.video-card {
			margin-top: 4px;
			font-size: 13px;
			color: #9499a0;
			a {
				.svg {
					display: inline-block;
					width: 16px;
					height: 16px;
					margin-right: 2px;
					background-color: #000;
				}
				.time {
					margin-left: 4px;
				}
			}
		}
	}
}
</style>
